<!--
 * @Description:
 * @version:
 * @Author: sunqian_sr
 * @Date: 2023-03-03 16:44:11
 * @LastEditors: Andy
 * @LastEditTime: 2023-04-06 15:18:58
-->
<template>
  <el-scrollbar class="form-panel responsible-person">
    <el-form :model="params" class="demo-form-inline" ref="params" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.name')" prop="name">
            <el-input
              v-model="params.name"
              maxlength="50"
              clearable
              :placeholder="$t('certification.enterprise.namePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.cardType')" prop="certificateType">
            <x-select
              :placeholder="$t('certification.enterprise.cardTypePlaceholder')"
              v-model="params.certificateType"
              :options="dictOptions['certificate_type']"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.cardCode')" prop="certificateNumber">
            <el-input
              v-model="params.certificateNumber"
              clearable
              maxlength="50"
              :placeholder="$t('certification.enterprise.cardCodePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.phone')" prop="mobile">
            <el-input
              v-model="params.mobile"
              clearable
              maxlength="50"
              :placeholder="$t('certification.enterprise.phonePlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('certification.enterprise.responsibleEmail')" prop="email">
            <el-input
              v-model="params.email"
              clearable
              maxlength="50"
              :placeholder="$t('certification.enterprise.responsibleEmailPlaceholder')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-scrollbar>
</template>
<script>
  import { checkEmail, checkMobilePhone, cloneDeep } from '@package/utils'
  import { apiPostAddLiaison, apiGetLiaison, apiPostUpdateLiaison } from '../api'
  import { EnumApiCode } from '../../../../../../globalEnum.js'

  export default {
    name: 'ResponsiblePerson',
    props: {
      dictOptions: {
        type: Object,
        default: () => ({})
      },
      supplierId: {
        type: String
      }
    },
    data() {
      return {
        params: {
          name: '',
          mobile: '',
          certificateType: '',
          certificateNumber: '',
          email: ''
        },
        rules: {
          name: [{ required: true, message: this.$t('certification.enterprise.namePlaceholder'), trigger: 'blur' }],
          mobile: [
            { required: true, message: this.$t('certification.enterprise.phonePlaceholder'), trigger: 'blur' },
            { validator: this.validatePhone, trigger: 'blur' }
          ],
          certificateType: [
            { required: true, message: this.$t('certification.enterprise.cardTypePlaceholder'), trigger: 'blur' }
          ],
          certificateNumber: [
            { required: true, message: this.$t('certification.enterprise.cardCodePlaceholder'), trigger: 'blur' }
          ],
          email: [
            { required: true, message: this.$t('certification.enterprise.validateEmail'), trigger: 'blur' },
            { validator: this.validateEmail, trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      supplierId: {
        handler(val) {
          if (val) {
            this.getDetail()
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      async getDetail() {
        const { data } = await apiGetLiaison(this.supplierId)
        this.params = Object.assign(this.params, cloneDeep(data))
      },
      handleVaildForm() {
        return new Promise((resolve) => {
          this.$refs.params.validate((valid) => {
            resolve(valid)
          })
        })
      },
      onSumit(isVaild = true) {
        return new Promise(async (resolve, reject) => {
          const isSubmit = !isVaild || (await this.handleVaildForm())
          if (isSubmit) {
            const param = {
              ...this.params,
              supplierId: this.supplierId
            }
            const { data, code } =
              'id' in this.params ? await apiPostUpdateLiaison(param) : await apiPostAddLiaison(param)
            if (EnumApiCode.Success === code) {
              resolve(data)
            } else {
              reject()
            }
          } else {
            reject()
          }
        })
      },
      validateEmail(rule, value, callback) {
        if (value && value !== '' && !checkEmail(value)) {
          callback(new Error(this.$t('certification.enterprise.validateEmailRight')))
        } else {
          callback()
        }
      },
      validatePhone(rule, value, callback) {
        if (value && value !== '' && !checkMobilePhone(value)) {
          callback(new Error(this.$t('certification.enterprise.pleasePhoneRight')))
        } else {
          callback()
        }
      }
    }
  }
</script>
